import React, { useState } from 'react'
import One from './02_One';
import Two from './03_Two';
import Three from './04_Three';

export default function DiffCom() {
  //声明一个状态
  let [count, setCount] = useState(0);

  return (
    <div style={{padding: 40}}>
      <h2>{count}</h2>
      <button onClick={() => {setCount(count + 1)}}>+ 1</button>
      <hr />
      {/* 不同类型的一般元素 */}
      <h2>对比不同类型的一般元素</h2>
      {count % 2 ? <h4>你好</h4> : <a href="/test">测试</a>}

      <h2>对比相同类型的一般元素</h2>
      {count % 2 ? <h4 title="hello">你好</h4> : <h4 title="world">再见</h4>}
      {count % 2 ? <h4>你好</h4> : <h4>你好</h4>}

      <h2>对比不同类型的组件</h2>
      {count % 2 ? <One /> : <Two />}

      <h2>对比相同类型的组件</h2>
      {count % 2 ? <Three value="100" /> : <Three value="200" />}
    </div>
  )
}
